import React from 'react';
import PropTypes from 'prop-types';
import StyleInput, { InputContainer, Prefix, Suffix } from './style';
import Icon from "components/Icon";
import { ReactComponent as SearchIcon } from 'assets/icons/search.svg';
import { useTheme } from 'styled-components';
const Input = ({
    placeholder = '请输入内容...',
    prefix,
    suffix,
    ...rest
}) => {

    return (
        <InputContainer {...rest}>
            {prefix && <Prefix>{prefix}</Prefix>}
            <StyleInput placeholder={placeholder} />
            {suffix && <Suffix>{suffix}</Suffix>}
        </InputContainer>
    )
}

const Search = ({ placeholder = "请输入搜索内容...", ...rest }) => {

    const theme = useTheme();

    return (
        <Input
            placeholder={placeholder}
            prefix={
                <Icon
                    icon={SearchIcon}
                    color={theme.gray3}
                    width={18}
                    height={18}
                />}
            {...rest}
        />
    );
}

Input.Search = Search;

Input.propTypes = {
    placeholder: PropTypes.string,
    prefix: PropTypes.any,
    suffix: PropTypes.any,

}

export default Input
